<template>
  <header>
    <el-row>
      <el-col :span="24">
        <el-menu
            :default-active="props.activeIndex"
            mode="horizontal"
            class="el-menu-vertical-demo"
            background-color="#2563eb"
            text-color="#f1f5f9"
            active-text-color="#fcd34d"
            router
        >
          <el-col :span="427" class="flex items-center justify-center text-black-500 font-semibold">
            <span style="font-size: 18px; padding-left: 25px; padding-right: 80px;">茶叶溯源平台--种植过程管理系统</span>
          </el-col>

          <el-sub-menu index="1" class="font-bold">
            <template #title><el-icon><View /></el-icon>投入品信息</template>
            <el-menu-item index="/trpcgInfo"><el-icon><Position /></el-icon>投入品采购信息</el-menu-item>
            <el-menu-item index="/trpsyInfo"><el-icon><Position /></el-icon>投入品使用信息</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2" class="font-bold">
            <template #title><el-icon><Setting /></el-icon>种植过程管理</template>
            <el-menu-item index="/nszyInfo"><el-icon><Position /></el-icon>农事作业信息</el-menu-item>
            <el-menu-item index="/iotInfo"><el-icon><Position /></el-icon>生产环境数据</el-menu-item>
          </el-sub-menu>

          <el-menu-item :index="`/cpscInfo`" class="font-bold">
            <el-icon><Compass /></el-icon>
            生成产品批次
          </el-menu-item>
          <el-menu-item :index="`/jcsdInfo`" class="font-bold">
            <el-icon class="el-icon--right">
              <Upload/>
            </el-icon>
            产品检测信息上传
          </el-menu-item>

          <backpart></backpart>
        </el-menu>
      </el-col>
    </el-row>
  </header>
</template>

<script setup>
import Backpart from "../commons/backpart.vue";

const props = defineProps({
  activeIndex: {
    type: String,
    required: true
  }
})
</script>

<style scoped>

</style>